<template>
  <div class="container d-flex">
      <div class="search-wrap d-flex flex-wrap">
          <template v-for="(item,index) in fields" :key="index">
              <!-- 输入类型  -->
              <div class="search-item d-flex a-center m-b10 m-l10" v-if="item.type === 'input'">
                  <label>{{item.label}}</label>
                  <el-input
                      class="m-l5 input-width"
                      :clearable="item.clearable || false"
                      v-model="searchParam[item.key]"
                      :placeholder="item.placeholder"
                  ></el-input>
              </div>

              <!-- 下拉类型 -->
              <div class="search-item m-l10 m-b10" v-else-if="item.type === 'select'">
                  <label>{{item.label}}</label>
                  <el-select
                      class="m-l5"
                      :clearable="item.clearable || false"
                      v-model="searchParam[item.key]"
                      :placeholder="item.placeholder"
                      @change="(e)=>{item.fun(e)}"
                  >
                      <el-option
                          v-for="(subItem, sonIndex) in item.options.list"
                          :key="sonIndex"
                          :label="subItem[item.options.labelKey]"
                          :value="subItem[item.options.valueKey]"
                      />
                  </el-select>
              </div>

              <!-- 时间范围选择 -->
              <div class="search-item m-l10 m-b10" v-else-if="item.type === 'datetimerange'">
                  <label>{{item.label}}</label>
                  <el-date-picker
                      v-model="searchParam[item.key]"
                      type="datetimerange"
                      class="search_time m-l5"
                      size="large"
                      range-separator="-"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      @change="(e)=>{item.fun(e,{startTimeName:item.startTimeName,endTimeName:item.endTimeName})}"
                  >
                  </el-date-picker>
              </div>

              <!-- 年        -->
              <div class="search-item m-l10 m-b10" v-else-if="item.type==='year'">
                  <label>{{item.label}}</label>
                  <el-date-picker
                      size="large"
                      class="search_time m-l5"
                      v-model="searchParam[item.key]"
                      type="year"
                      value-format="YYYY"
                      :clearable="item.clearable || false"
                      placeholder="选择年">
                  </el-date-picker>
              </div>
          </template>
          <div class="search-button m-l20">
              <el-button
                  color="#fc702b"
                  style="color:#fff;"
                  @click.prevent="onQuery"
              >查询</el-button>
              <el-button
                  color="#f0f0f0"
                  style="color: #000000"
                  @click.prevent="onReset"
              >重置</el-button>
          </div>
      </div>
  </div>
</template>

<script setup>
import {ElDatePicker} from "element-plus";

const props =  defineProps({
    fields:{
        type:Array,
        default:[]
    },
    searchParam:{
        type:Object,
        default: {}
    }
});

const emits = defineEmits(['onQuery','onReset']);

/**
 * 查询
 */
const onQuery = () => {
    emits('onQuery',props.searchParam);
}

/**
 * 重置
 */
const onReset = () => {
    emits('onReset',props.searchParam);
}
</script>

<style lang="scss" scoped>
.search-item{
    .input-width{
        width: 200px;
    }
}

.container{
    height: auto !important;
}
</style>
